<template>
	<div>
		<div style="color: white;font-size: 22px;position: absolute;top: 115px;left: 67px;" @click="$router.push({path: '/'})">
			<van-icon name="arrow-left" />
			<span style="position: absolute;width: 100px;top: -5px;left: 40px;">高新奇</span>
		</div>
		<div align="center">
			<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
				<div class="left" @click="onSwipeRight">
					<van-icon name="arrow-left" />
				</div>
				<div class="right" @click="onSwipeLeft">
					<van-icon name="arrow" />
				</div>
				<div style="position: absolute;top: 165px;left: 180px;right: 180px;">
					<van-row gutter="40" v-if="test == 1" class="a-fadeinL">
						<van-col span="8">
							<img src="../assets/b1.png" loading="lazy" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(0)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区环境</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/b2.png" loading="lazy" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(1)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区环境</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/b3.png" loading="lazy" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(2)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区环境</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/b4.png" loading="lazy" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(3)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区环境</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/b5.png" loading="lazy" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(4)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区环境</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/b6.png" loading="lazy" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(5)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区环境</span>
						</van-col>
					</van-row>
					<van-row gutter="40" v-if="test == 0" class="a-fadeinR">
						<van-col span="8">
							<img src="../assets/b1.png" loading="lazy" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(0)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区环境</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/b2.png" loading="lazy" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(1)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区环境</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/b3.png" loading="lazy" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(2)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区环境</span>
						</van-col>
					</van-row>
				</div>
			</v-touch>
		</div>
	</div>
</template>

<script>
	import { ImagePreview } from 'vant';
	let _this;
	export default {
		name: 'Content',
		data() {
			return {
				test: 1
			}
		},
		beforeCreate() { // 创建 vue 实例之前
			_this = this;
		},
		watch: {

		},
		mounted() {

		},
		methods: {
			onSwipeLeft() { // 左滑
				this.test = 0;
			},
			onSwipeRight() { // 右滑
				this.test = 1;
			},
			getImg(index) {
				ImagePreview({
					images: [
						require("../assets/b1.png"),
						require("../assets/b2.png"),
						require("../assets/b3.png"),
						require("../assets/b4.png"),
						require("../assets/b5.png"),
						require("../assets/b6.png")
					],
					startPosition: index
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-icon {
		font: 24px/1 "vant-icon";
	}
	
	/deep/ .van-row {
		margin-right: 0!important;
	}
	
	.left /deep/ .van-icon {
		font: 48px/1 "vant-icon";
		color: rgb(56, 107, 146);
	}
	
	.left {
		position: absolute;
		top: 340px;
		left: 100px;
	}
	
	.right /deep/ .van-icon {
		font: 48px/1 "vant-icon";
		color: rgb(53, 86, 114);
	}
	
	.right {
		position: absolute;
		top: 340px;
		right: 100px;
	}
</style>